<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
	<link rel="stylesheet" href="commonCSS/div-loading1.css" />
	<link rel="stylesheet" href="commonCSS/htmlFontSize.css" />
	<link rel="stylesheet" href="commonCSS/bottomFixedList.css" />
	<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
	<link rel="stylesheet" href="shoppingCss/buyGamesSkin1.css" />
	<!--引入 font awesome 图标库文件-->
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	
	
</head>
<body>
	<!--动画效果的div元素-->
	<div class="hide-loading">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<script src="indexJs/hideLoadingDiv-before.js"></script>
	<section id="games-section">
		<header id="games-section-header">
			<div class="selective-games">
				<a href=""><img src="indexImg/O1CN01hWoDpA29hOOSTwYSn_!!6000000008099-2-tps-690-260.png"/></a>
			</div>
			<div class="selective-games">
				<ul class="display-flex flex-justify-space-around flex-align-items-center">
					<li>
						<a href="">
							<img src="https://gw.alipayobjects.com/os/q/cms/images/kcd01rvm/4a590127-4797-4ea6-ac8e-520fad091446_w400_h300.jpg" alt="" />
							<div>荣耀水晶特惠</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="https://gw.alipayobjects.com/os/q/cms/images/kcd01rvm/4a590127-4797-4ea6-ac8e-520fad091446_w400_h300.jpg" alt="" />
							<div>荣耀水晶特惠</div>
						</a>
					</li>
					<li>
						<a href="">
							<img src="https://gw.alipayobjects.com/os/q/cms/images/kcd01rvm/4a590127-4797-4ea6-ac8e-520fad091446_w400_h300.jpg" alt="" />
							<div>荣耀水晶特惠</div>
						</a>
					</li>
				</ul>
			</div>
			
		</header>
		<nav id="games-section-nav" class="display-flex flex-justify-space-between flex-align-items-center">
			<a href="">
				<div><img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" /></div>
				<div>B站会员</div>
			</a>
			<a href="">
				<div><img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" /></div>
				<div>B站会员</div>
			</a>
			<a href="">
				<div><img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" /></div>
				<div>B站会员</div>
			</a>
			<a href="">
				<div><img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" /></div>
				<div>B站会员</div>
			</a>
			<a href="">
				<div><img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" /></div>
				<div>B站会员</div>
			</a>
		</nav>
		<!--领券下单、百皮特价、星元皮肤开始-->
		<section id="bonus-section">
			<div id="nav-bar">
				<ul id="bonus-bar" class="display-flex flex-justify-center flex-align-items-center">
					<li><a href="javascript:;">领券下单</a></li>
					<li><a href="javascript:;">百皮特惠</a></li>
					<li><a href="javascript:;">星元皮肤</a></li>
					<li>
						<i class="fa fa-align-justify"></i>
						<i class="fa fa-th-large"></i>
						<i class="fa fa-th"></i>
					</li>
				</ul>
			</div>
			
			<div id="games-coupon" class="display-flex flex-justify-center flex-align-items-start">
				<!--优惠券下单-->
				<ul class="bonus-ul display-flex flex-wrap flex-align-content-start flex-align-items-stretch">
					<li>
						<a href="">
							<div class="device-brand-mark">
								<img src="https://static.jiaoyimao.cn/image/202007180859230904Screenshot_20200718_084948_a42e8385998837e8c6814ff862ed717b-860.jpg" alt="" />
								<div class="ios">
									IOS
								</div>
							</div>
							<div class="games-info1">
								105皮肤 全息碎影 白虎志 青龙志 大圣娶亲 朱雀志 一生所爱 4战令 末日机甲 圣诞狂欢
								
							</div>
							<div class="games-info2">
								<strong>免押金</strong>
								<strong>3小时起租</strong>
							</div>
							<div class="games-info3">
								<strong>
									￥
									<em>
										1.00
									</em>
									/小时
								</strong>
								<strong>
									券
								</strong>
								<span>
									已出租3个小时
								</span>
							</div>
						</a>
					</li>
					
				</ul>
				<!--百皮特惠开始-->
				<ul class="bonus-ul display-flex flex-wrap flex-align-content-start flex-align-items-stretch">
					
					<li>
						<a href="">
							<div class="device-brand-mark">
								<img src="https://static.jiaoyimao.cn/image/202007180859230904Screenshot_20200718_084948_a42e8385998837e8c6814ff862ed717b-860.jpg" alt="" />
								<div class="ios">
									IOS
								</div>
							</div>
							<div class="games-info1">
								105皮肤 全息碎影 白虎志 青龙志 大圣娶亲 朱雀志 一生所爱 4战令 末日机甲 圣诞狂欢
								
							</div>
							<div class="games-info2">
								<strong>免押金</strong>
								<strong>3小时起租</strong>
							</div>
							<div class="games-info3">
								<strong>
									￥
									<em>
										1.00
									</em>
									/小时
								</strong>
								<strong>
									券
								</strong>
								<span>
									已出租3个小时
								</span>
							</div>
						</a>
					</li>
				</ul>
				<!--星元皮肤开始-->
				<ul class="bonus-ul display-flex flex-wrap flex-align-content-start flex-align-items-stretch">
					<li>
						<a href="">
							<div class="device-brand-mark">
								<img src="https://static.jiaoyimao.cn/image/202007110448560384pt2020_07_11_04_00_47_mh1594411329759-860.jpg" alt="" />
								<div class="ios">
									IOS
								</div>
							</div>
							<div class="games-info1">
								105皮肤 全息碎影 白虎志 青龙志 大圣娶亲 朱雀志 一生所爱 4战令 末日机甲 圣诞狂欢
								
							</div>
							<div class="games-info2">
								<strong>免押金</strong>
								<strong>3小时起租</strong>
							</div>
							<div class="games-info3">
								<strong>
									￥
									<em>
										1.00
									</em>
									/小时
								</strong>
								<strong>
									券
								</strong>
								<span>
									已出租3个小时
								</span>
							</div>
						</a>
					</li>
					
				</ul>
			</div>
		</section>
	</section>
	<footer>
		<!--关于页面底部的5个排列盒子的结构设计-->
		<div id="bottom-fixed">
			<div>
				<ul id="bottom-fixed-ul">
					<li id="backTop01">
						<a href="javascript:;">
							<i class="fa fa-angle-double-up" title="to the top of this page"></i>
							<i class="fa fa-angle-double-down" title="to the bottom of this page"></i>
						</a>
					</li>
					<li>
						<a href="index.html">
							<i class="fa fa-cube"></i>
							<p>Main Page</p>
						</a>
					</li>
					<li>
						<a href="shopping.html">
							<i class="fa fa-cart-plus"></i>
							<p>Buy</p>
						</a>
					</li>
					
					<li>
						<a href="userMessage.html">
							<i class="	fa fa-commenting"></i>
							<p>Message</p>
						</a>
					</li>
					<li>
						<a href="userCenter.html">
							<i class="fa fa-address-book"></i>
							<p>Mine</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</footer>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="buyGamesSkin1JS/buyGamesSkin1.js"></script>
	<!--动画加载效果在页面完全加载好后才消失-->
	<script src="indexJs/hideLoadingDiv-after.js"></script>
	<!--<script src="indexJs/scrollToTopAnimation.js"></script>-->
	<!--<script src="commonCSS/afterLoading.js"></script>-->
</body>
</html>